﻿@{
    ViewBag.Title = "ServerTemplate";
    Layout = "~/Views/Shared/_BPage.cshtml";
}

<h2>Server Template</h2>
<br />
<input id="btnSubmit" type="button" value="submit" />

<script type="text/template" id="tpl">
    <% 
    var index = 0;
    for(var i = 0; i < list.length; i++) { 
        var item = list[i] 
    %>
        <tr>
            <td><%=++index%></td>
            <td><%=item.Name%></td>
            <td><%=item.Age%></td>
        </tr>
    <%
    } 
    %>
</script>

<div id="result" style="display:none;margin-top:100px;">
    <table id="tbEmp" border="1" class="normal_table" style="width: 50%">
        <thead>
            <tr>
                <th style="width: 10%">No</th>    
                <th>Name</th>
                <th style="width: 30%">Age</th>
            </tr>
        </thead>
    </table>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        var url = "/Ajax/GetJsonResult";

        var jsonData = [ { "Name": "Kelvin", "Age": "35" }, { "Name": "Hdy", "Age": "25" }, { "Name": "Cxm", "Age": "24" } ];
        ZEUS.DEBUG.log("Request Data: ");
        ZEUS.DEBUG.log(JSON.stringify(jsonData));
        ZEUS.DEBUG.log("**************************************************************");
        var first = true;
        $('#btnSubmit').click(function () {
            $.ajax({
                url: url,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    var ele = $('#tbEmp'),
                    tpl = $('#tpl').html();
                    var modelData = {
                        list: data
                    }

                    var html = _.template(tpl, modelData);
                    if (first) {
                        ZEUS.DEBUG.log("Response Data: ");
                        ZEUS.DEBUG.log(JSON.stringify(data));

                        ele.append(html);
                        first = false;
                    } else {
                        ZEUS.DEBUG.log("Already returned data, no more!");
                    }
                    $('#result').show();
                }
            });
        });
    });
</script>